<template>
  <div 
    ref="menuRef" 
    class="context-menu background-blur"
    :style="{ 
      left: `${x}px`, 
      top: `${y}px`, 
      display: visible ? 'block' : 'none' 
    }"
  >
    <ul v-if="targetNode">
      <li @click="handleAction('explode')">衍生节点</li>
      <li @click="handleAction('focus')">聚焦节点</li>
      <li @click="handleAction('center')">移动到中心</li>
      <li @click="handleAction('edit')">编辑</li>
      <li @click="handleAction('delete')" :class="{ disabled: targetNode?.id === '0' }">删除节点</li>
    </ul>
    <ul v-else>
      <li @click="handleCanvasAction('center')">回到视图中心</li>
      <li @click="handleCanvasAction('zoomIn')">放大</li>
      <li @click="handleCanvasAction('zoomOut')">缩小</li>
      <li @click="handleCanvasAction('reset')">重置</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import galaxyCore from '../index';

const menuRef = ref(null);
const x = ref(0);
const y = ref(0);
const visible = ref(false);
const targetNode = ref(null);

// 处理菜单操作
const handleAction = (action) => {
  if (!targetNode.value) return;
  
  switch (action) {
    case 'explode':
      galaxyCore.assignNewColorGroup(targetNode.value);
      galaxyCore.explodeNode(targetNode.value).then(() => {
        galaxyCore.update();
      });
      break;
    case 'focus':
      galaxyCore.store.focusedNode = targetNode.value;
      galaxyCore.highlightFocusedNode();
      galaxyCore.moveNodeToViewCenter(targetNode.value);
      break;
    case 'center':
      galaxyCore.moveNodeToViewCenter(targetNode.value);
      break;
    case 'delete':
      galaxyCore.deleteNode(targetNode.value);
      break;
  }
  
  visible.value = false;
};

// 处理画布右键菜单操作
const handleCanvasAction = (action) => {
  switch (action) {
    case 'center':
      galaxyCore.moveToViewCenter();
      break;
    case 'zoomIn':
      galaxyCore.zoomIn();
      break;
    case 'zoomOut':
      galaxyCore.zoomOut();
      break;
    case 'reset':
      galaxyCore.reset();
      break;
  }
  
  visible.value = false;
};

// 显示菜单
const showMenu = (event, node) => {
  x.value = event.clientX;
  y.value = event.clientY;
  targetNode.value = node;
  visible.value = true;
  
  // 确保菜单不超出视口
  nextTick(() => {
    if (menuRef.value) {
      const rect = menuRef.value.getBoundingClientRect();
      if (x.value + rect.width > window.innerWidth) {
        x.value = window.innerWidth - rect.width - 10;
      }
      if (y.value + rect.height > window.innerHeight) {
        y.value = window.innerHeight - rect.height - 10;
      }
    }
  });
};

// 隐藏菜单
const hideMenu = () => {
  visible.value = false;
  targetNode.value = null;
};

onMounted(() => {
  // 监听显示菜单事件
  galaxyCore.on('show-contextmenu', showMenu);
  
  // 监听点击事件，隐藏菜单
  document.addEventListener('click', hideMenu);
});

onUnmounted(() => {
  // 移除事件监听
  document.removeEventListener('click', hideMenu);
});
</script>

<style lang="scss" scoped>
.context-menu {
  position: absolute;
  z-index: 100;
  min-width: 150px;
  border-radius: 6px;
  box-shadow: var(--c-box-shadow-2);
  background-color: var(--c-bg-popover-color);
  color: var(--c-text-color-2);
  border: 1px solid var(--c-border-color-3);
  padding: 5px 0;
  margin: 0;
  list-style: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: top left;
  transform: scale(0.95);
  opacity: 0;
}

.context-menu[style*="display: block"] {
  transform: scale(1);
  opacity: 1;
}

.context-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  user-select: none;
}

.context-menu li:hover {
  background-color: var(--c-bg-hover-color);
}

.context-menu li.disabled {
  color: var(--c-text-color-3);
  cursor: not-allowed;
  background-color: transparent !important;
}
</style>